<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 14:05:02
 * @LastEditors: Chenqiu
 * @LastEditTime: 2021-09-23 16:59:16
-->
<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <Header></Header>
    </div>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="center">
      <div class="wrapper">
        <!-- {{articleList}} -->
        <!-- 获取文章标题 -->
        <div class="title">{{ articleList.title }}</div>
        <div class="time">
          <!-- 发表时间 -->
          <span>发表时间：&nbsp;{{ articleList.publishTime | fmtDate }}</span>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <!-- 阅读次数 -->
          <span>浏览量：&nbsp;{{ articleList.readTimes }}</span>
        </div>
        <hr>
        <div class="bottom" v-html="articleList.content">
          {{ articleList.content }}
        </div>
      </div>
    </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <div class="bottom">
      <Footer></Footer>
    </div>
    <!-- /底部 -->
  </div>
</template>
<script>
import Header from "../components/Header";
import Footer from "../components/Footer";
import { get } from "../utils/request";
export default {
  // 注册局部组件
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      articleList: {},
      id: 0,
    };
  },
  created() {
    // 获取List传来的id
    this.id = this.$route.query.id;
    this.loadDetails();
  },
  methods: {
    // 加载文章详情页
    loadDetails() {
      let url = "/index/article/findById";
      get(url, { id: this.id }).then((res) => {
        this.articleList = res.data;
      });
    },
  },
};
</script>
<style lang="scss">
.center {
  background-color: #cfc8cf;
  min-height: 500px;
  padding: 1em 0.5em;
  .wrapper {
    background-color: #fff;
    border-radius: 3px;
    padding:3% 3%;
    .title{
      font-size: 30px;
      text-align: center;
      margin-bottom: 2%;
    }
    .time{
      text-align: center;
    }
    .bottom{
      .img{
        width: 100px;
      }
      p{
        text-indent:2em;
      }
    }
  }
}
</style>